<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="线路段管理"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="700px"
    >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="所属线路" prop="lineId">
                <el-select
                    v-model="form.lineId"
                    filterable
                    placeholder="请选择"
                    style="width:100%;"
                >
                    <el-option
                        v-for="item in lineOptions"
                        :key="item.id"
                        :label="item.lineName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="出发车场" prop="startCarParkId">
                        <el-select
                            v-model="form.startCarParkId"
                            filterable
                            placeholder="请选择"
                            style="width:100%"
                        >
                            <el-option
                                v-for="item in carParkOptions"
                                :key="item.id"
                                :label="item.carParkName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="到达车场" prop="endCarParkId">
                        <el-select
                            v-model="form.endCarParkId"
                            filterable
                            placeholder="请选择"
                            style="width:100%"
                        >
                            <el-option
                                v-for="item in carParkOptions"
                                :key="item.id"
                                :label="item.carParkName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="线路段名称" prop="lineSectionName">
                <el-input v-model="form.lineSectionName" placeholder="不填自动生成"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark"/>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-popconfirm title="确定保存线路段吗？" @onConfirm="submitForm()">
                <el-button slot="reference" type="primary">保存</el-button>
            </el-popconfirm>
        </div>

    </el-dialog>
</template>

<script>
import {LineSectionApi} from '@/api/intercity/LineSectionApi'
import {CarParkApi} from '@/api/intercity/CarParkApi'
import {LineApi} from '@/api/intercity/LineApi'
import {Common} from '@/utils/common'

export default {
    name: 'LineSectionUpdate',
    components: {},
    data() {
        return {
            form: {
                id: 0,
                lineId: '',
                lineSectionName: '',
                startCarParkId: '',
                endCarParkId: '',
                stopTime: '',
                remark: '',
                sort: 0
            },
            rules: {
                lineId: [
                    {required: true, message: '请选择线路', trigger: 'change'}
                ],
                sectionName: [
                    {required: true, message: '请输入线路区间名称', trigger: 'blur'},
                    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                startCarParkId: [
                    {required: true, message: '请选择出发车场', trigger: 'change'}
                ],
                endCarParkId: [
                    {required: true, message: '请选择到达车场', trigger: 'change'}
                ]
            },
            dialogVisible: false,
            lineOptions: [],
            carParkOptions: []
        }
    },
    methods: {
        // 显示组件
        showUpdate(data) {
            this.dialogVisible = true
            this.getCarParkList()
            this.getLineList()
            if (data.id > 0) {
                data.lineId = data.lineId
                data.startCarParkId = data.startCarParkId
                data.endCarParkId = data.endCarParkId
                this.$nextTick(() => {
                    this.form = Common.assign(this.form, data)
                })
            } else {
                this.form.id = 0
                if (this.$refs['formRef'] !== undefined) {
                    this.$refs['formRef'].resetFields()
                }
            }
        },

        // 获取线路列表
        getLineList() {
            LineApi.getList().then((data) => {
                this.lineOptions = data
            })
        },

        // 获取车场列表
        getCarParkList() {
            CarParkApi.getList('').then((data) => {
                this.carParkOptions = data
            })
        },

        // 提交表单
        submitForm() {
            const that = this
            that.$refs['formRef'].validate((valid) => {
                if (valid) {

                    if (that.form.id > 0) {
                        LineSectionApi.update(that.form).then((response) => {
                            that.dialogVisible = false
                            that.$emit('refresh')
                        })
                    } else {
                        LineSectionApi.insert(that.form).then((response) => {
                            that.dialogVisible = false
                            that.$emit('refresh')
                        })
                    }
                }
            })
        }
    }
}
</script>
